<script lang="ts">
import { computed, defineComponent, createVNode } from 'vue';
import { BaseFieldWidget, ViewType, ModelFieldType, VueWidget } from '@kunlun/mobile-dependencies';

export default defineComponent({
  name: 'H5DesignerVue',
  props: ['designerData', 'updateColumn'],
  setup(props, context) {
    const component = computed(() => {
      if (props.designerData) {
        console.log('designerData', props.designerData?.widgetName);
        const constructor = BaseFieldWidget.Selector({
          ttype: ModelFieldType.String,
          viewType: ViewType.Form,
          widget: props.designerData?.widgetName
        });

        if (!constructor) {
          throw new Error('获取组件异常');
        }
        const widget = new VueWidget().createWidget(constructor);
        return widget.getComponent();
      }
    });

    const attrData = computed(() => {
      return props.designerData || {};
    });

    return {
      finalComponent: component,
      attrData,
      updateColumn: props.updateColumn
    };
  },
  render() {
    // 参数一：元素类型    参数二：元素属性    参数三：元素内容
    return createVNode(
      'div',
      {
        class: 'designer-item-wrapper'
      },
      {
        default: () => {
          return [createVNode(this.finalComponent!, { updateColumn: this.updateColumn, attrData: this.attrData })];
        }
      }
    );
  }
});
</script>
<style lang="scss">
.notice-bar-field {
}
</style>
